<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能文本校对系统后台管理平台</title>
    <link href="../static/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="../static/style/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app" class="admin">
    <div class="background"></div>
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">智能文本校对系统后台管理平台</a>
            </div>
            <div class="collapse navbar-collapse navbar-right">
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <label class="control-label">陈煦</label>
                        <label class="control-label">管理员</label>
                    </div>
                </form>
            </div>
        </div>
    </nav>
    <div class="main-container">
        <div class="sidebar">
            <div class="panel">
                <div class="panel-heading">
                    <h4 class="h4">系统管理</h4>
                    <hr/>
                </div>
                <ul class="list-group">
                    <li class="list-group-item" @click="panelType=1">
                        <i class="glyphicon glyphicon-scale"></i>
                        <span class="ml-5">运行状态</span>
                    </li>
                    <li class="list-group-item" @click="panelType=2">
                        <i class="glyphicon glyphicon-cog"></i>
                        <span class="ml-5">环境设置</span>
                    </li>
                </ul>
            </div>
            <div class="panel">
                <div class="panel-heading">
                    <h4 class="h4">权限管理</h4>
                    <hr/>
                </div>
                <ul class="list-group">
                    <li class="list-group-item" @click="panelType=1">
                        <i class="glyphicon glyphicon-user"></i>
                        <span class="ml-5">用户管理</span>
                    </li>
                    <li class="list-group-item" @click="panelType=2">
                        <i class="glyphicon glyphicon-lock"></i>
                        <span class="ml-5">角色管理</span>
                    </li>
                </ul>
            </div>
            <div class="panel">
                <div class="panel-heading">
                    <h4 class="h4">数据管理</h4>
                    <hr/>
                </div>
                <ul class="list-group">
                    <li class="list-group-item" @click="panelType=1">
                        <i class="glyphicon glyphicon-list-alt"></i>
                        <span class="ml-5">数据查询</span>
                    </li>
                    <li class="list-group-item" @click="panelType=2">
                        <i class="glyphicon glyphicon-hdd"></i>
                        <span class="ml-5">数据统计</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="panel panel-main" style="overflow: auto;">
            <div v-if="panelType==0">
                <div style="background: url('../static/img/index.jpg') center center no-repeat; width: 100%; height: 660px;"></div>
            </div>
            <div v-else-if="panelType==1">
                <div class="panel-heading">
                    <h3 class="h3">数据查询</h3>
                    <hr/>
                </div>
                <div class="panel-body">
                    <div class="query-block">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="queryDateStart" class="control-label">起始日期</label>
                                <input id="queryDateStart" v-model="queryParam.dateStart" type="date"
                                       class="form-control ml-5 w-150">
                            </div>
                            <div class="form-group ml-20">
                                <label for="queryDateEnd" class="control-label">结束日期</label>
                                <input id="queryDateEnd" v-model="queryParam.dateEnd" type="date"
                                       class="form-control ml-5 w-150">
                            </div>
                            <div class="form-group ml-20">
                                <label for="queryType" class="control-label">服务类型</label>
                                <select id="queryType" class="form-control ml-5" v-model="queryParam.type">
                                    <option value="2">全部</option>
                                    <option value="0">形音纠错服务</option>
                                    <option value="1">重复纠错服务</option>
                                </select>
                            </div>
                            <div class="form-group ml-20">
                                <label for="queryType" class="control-label">用户反馈</label>
                                <select id="queryType" class="form-control ml-5" v-model="queryParam.feedback">
                                    <option value="3">全部</option>
                                    <option value="0">拒绝</option>
                                    <option value="1">接受</option>
                                    <option value="2">无评价</option>
                                </select>
                            </div>
                            <div class="form-group right">
                                <div @click="query" class="btn btn-default">提交</div>
                            </div>
                        </form>
                    </div>
                    <table class="table table-bordered">
                        <tr>
                            <th>输入文本</th>
                            <th>服务日期</th>
                            <th>服务类型</th>
                            <th>用户反馈</th>
                            <th>相关操作</th>
                        </tr>
                        <tr v-for="item in dataList">
                            <td v-text="item.document"></td>
                            <td v-text="item.date"></td>
                            <td>
                                <span v-if="item.type==0">拼写纠错服务</span>
                                <span v-else>字词去重服务</span>
                            </td>
                            <td>
                                <span v-if="item.feedback==0">拒绝</span>
                                <span v-else-if="item.feedback==1">接受</span>
                                <span v-else>无评价</span>
                            </td>
                            <td style="pointer: cursor;" @click="open">查看详情</td>
                        </tr>
                    </table>
                    <div class="pagination" v-show="queryParam.isQuery">
                        <form class="form-inline right">
                            <div class="form-group">
                                <label for="page" class="control-label">页码</label>
                                <input id="page" type="text" class="form-control ml-5" v-model="page.number"> / <span
                                    v-text="page.total"></span>
                            </div>
                            <div class="form-group ml-20">
                                <div @click="query" class="btn btn-default">跳页</div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            <div v-else-if="panelType==2">
                <div class="panel-heading">
                    <h3 class="h3">数据统计</h3>
                    <hr/>
                </div>
                <div class="panel-body">
                    <div class="query-block">
                        <form class="form-inline">
                            <div class="form-group">
                                <label for="queryDateStart" class="control-label">起始日期</label>
                                <input id="queryDateStart" v-model="queryParam.dateStart" type="date"
                                       class="form-control ml-5 w-150">
                            </div>
                            <div class="form-group ml-20">
                                <label for="queryDateEnd" class="control-label">结束日期</label>
                                <input id="queryDateEnd" v-model="queryParam.dateEnd" type="date"
                                       class="form-control ml-5 w-150">
                            </div>
                            <div class="form-group right">
                                <div @click="query" class="btn btn-default">提交</div>
                            </div>
                        </form>
                    </div>
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6">
                                <div id="serviceCount" style="width: 500px;height:400px;"></div>
                            </div>
                            <div class="col-md-6">
                                <div id="serviceCountPie" style="width: 300px;height:400px;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-12">
                                <div id="serviceCountStatistic" style="width: 800px;height:500px;"></div>
                            </div>
                        </div>
                        <div class="row">
                            <div style="height: 150px;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="mask" v-if="isOpen"></div>
    <div class="panel panel-detail" v-if="isOpen">
        <div class="panel-heading">
            <h3>数据详情</h3>
        </div>
        <div class="panel-body">
            <form class="form form-horizontal">
                <div class="form-group">
                    <div class="col-md-6">
                        <label for="detailDate" class="control-label">服务日期：</label>
                        <input id="detailDate" type="text" class="form-control" value="2020-09-18 21:38:10" disabled/>
                    </div>
                    <div class="col-md-6">
                        <label for="detailDate" class="control-label">服务类型：</label>
                        <input id="detailDate" type="text" class="form-control" value="形音纠错" disabled/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-2">
                        <label for="detailDate" class="control-label">起始位置：</label>
                        <input id="detailDate" type="text" class="form-control" value="250" disabled/>
                    </div>
                    <div class="col-md-2">
                        <label for="detailDate" class="control-label">结束位置：</label>
                        <input id="detailDate" type="text" class="form-control" value="251" disabled/>
                    </div>
                    <div class="col-md-2">
                        <label for="detailDate" class="control-label">用户反馈：</label>
                        <input id="detailDate" type="text" class="form-control" value="接受" disabled/>
                    </div>
                    <div class="col-md-3">
                        <label for="detailDate" class="control-label">纠错建议：</label>
                        <input id="detailDate" type="text" class="form-control" value="我" disabled/>
                    </div>
                    <div class="col-md-3">
                        <label for="detailDate" class="control-label">纠错置信度：</label>
                        <input id="detailDate" type="text" class="form-control" value="0.6981" disabled/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-md-12">
                        <label for="detailDate" class="control-label">输入文本：</label>
                        <textarea id="detailDocument" rows="9" class="form-control" disabled></textarea>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<script src="../static/script/jquery.min.js"></script>
<script src="../static/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script src="../static/script/echarts.min.js"></script>
<script src="../static/script/vue.min.js"></script>
<script>


    new Vue({
        el: "#app",
        data: {
            isOpen: false,
            panelType: 2,
            queryParam: {
                dateStart: "",
                dateEnd: "",
                type: 2,
                feedback: 3,
                limit: 10,
                isQuery: false
            },
            page: {
                number: 1,
                total: 20
            },
            dataList: []
        },
        methods: {
            open () {
                this.isOpen = true;
                $("#detailDocument").val("因为罗伯特·伯恩斯没有足够的资金来支付旅费，前往西印度群岛，加文·汉密尔顿认为罗伯特·伯恩斯应该平均发表他的诗，可以从中获得一点金钱，提供他更宽裕的生活。4月3日，罗伯特·伯恩斯发送他的苏格兰诗歌给基尔马诺克一个本地出版商约翰·威尔逊，建议在1786年4月发表，同一天，Jean Armour的父亲撕毁伯恩斯的婚姻证书。7月22日，他转移了在Mossgiel农场的份额给弟弟吉尔伯特。7月30日，罗伯特·伯恩斯写信告诉他的朋友约翰·里士满说，「Jean Armour把我扔在监狱里，直到我能获得巨富。窝从一个朋友家流浪到另一个朋友家。」")
            },
            query() {
                let _this = this;

                $.ajax({
                    method: "get",
                    url: "/manager/data/get",
                    data: {
                        dateStart: this.queryParam.dateStart,
                        dateEnd: this.queryParam.dateEnd,
                        type: this.queryParam.type,
                        feedback: this.queryParam.feedback,
                        start: this.page.number,
                        limit: this.queryParam.limit
                    },
                    success(resp) {
                        if (resp.code === 1) {
                            let respData = resp.data;
                            for (let i = 0, len = respData.data.length; i < len; i++) {
                                respData.data[i].document = _this.ellipsis(respData.data[i].document);
                            }
                            _this.dataList = respData.data;
                            _this.page.total = Math.ceil(respData.count / _this.queryParam.limit);
                            _this.queryParam.isQuery = true;
                        }

                    }
                })
            },
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 24) {
                    return value.slice(0, 24) + '...'
                }
                return value
            },
            judge(event) {
                let target = event.target;

                if (target.tagName === "SPAN" || target.tagName == "I") {
                    target = target.parentNode;
                }
                const id = target.dataset.id,
                    type = target.dataset.type;

                console.log(id, type);
                if (id !== undefined && type !== undefined) {
                    $.ajax({
                        method: "post",
                        url: "/check/service/judge",
                        data: {
                            id: id,
                            type: type
                        },
                        success(resp) {

                        },
                        fail() {

                        }
                    })
                }
            }
        }
    })

    const optionService = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        title: {
            text: "各服务使用次数",
            align: "center"
        },
        legend: {
            data: ['拼写纠错', '重复纠错'],
            align: "right"
        },
        xAxis: [
            {
                type: 'category',
                data: ['20-10-04', '20-10-05', '20-10-06'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '使用次数',
                min: 0,
                max: 120,
                interval: 40,
                axisLabel: {
                    formatter: '{value} 次'
                }
            }
        ],
        series: [
            {
                name: '拼写纠错',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [32, 34, 42]
            },
            {
                name: '重复纠错',
                type: 'bar',
                label: {
                    show: true,
                    position: 'inside'
                },
                data: [24, 32, 14]
            }
        ]
    };
    const optionServicePie = {
        title: {
            text: '各服务使用次数',
            left: 'center'
        },
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        series: [
            {
                name: '服务类型',
                type: 'pie',
                radius: '40%',
                data: [
                    {value: 108, name: '拼写纠错'},
                    {value: 70, name: '重复纠错'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    var builderJson = {
        "all": 120,
        "charts": {
            "拼写纠错-接受次数": 96,
            "重复纠错-接受次数": 113
        },
        "components": {
            "拼写纠错-拒绝次数": 24,
            "重复纠错-拒绝次数": 7,
        }
    };

    var downloadJson = {
        "接受次数": 96,
        "拒绝次数": 24
    };

    var themeJson = {
        "接受次数": 113,
        "拒绝次数": 7,
    };


    option = {
        tooltip: {},
        title: [{
            text: '各服务接受率与拒绝率',
            left: '25%',
            textAlign: 'center'
        }, {
            text: '拼写纠错',
            subtext: '总计 ' + Object.keys(downloadJson).reduce(function (all, key) {
                return all + downloadJson[key];
            }, 0),
            left: '75%',
            textAlign: 'center'
        }, {
            text: '重复纠错',
            subtext: '总计 ' + Object.keys(themeJson).reduce(function (all, key) {
                return all + themeJson[key];
            }, 0),
            left: '75%',
            top: '50%',
            textAlign: 'center'
        }],
        grid: [{
            top: 50,
            width: '50%',
            bottom: '45%',
            left: 10,
            containLabel: true
        }, {
            top: '55%',
            width: '50%',
            bottom: 0,
            left: 10,
            containLabel: true
        }],
        xAxis: [{
            type: 'value',
            max: builderJson.all,
            splitLine: {
                show: false
            }
        }, {
            type: 'value',
            max: builderJson.all,
            gridIndex: 1,
            splitLine: {
                show: false
            }
        }],
        yAxis: [{
            type: 'category',
            data: Object.keys(builderJson.charts),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }, {
            gridIndex: 1,
            type: 'category',
            data: Object.keys(builderJson.components),
            axisLabel: {
                interval: 0,
                rotate: 30
            },
            splitLine: {
                show: false
            }
        }],
        series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.charts).map(function (key) {
                return builderJson.all - builderJson.charts[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            xAxisIndex: 1,
            yAxisIndex: 1,
            z: 3,
            label: {
                normal: {
                    position: 'right',
                    show: true
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.components[key];
            })
        }, {
            type: 'bar',
            stack: 'component',
            silent: true,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                normal: {
                    color: '#eee'
                }
            },
            data: Object.keys(builderJson.components).map(function (key) {
                return builderJson.all - builderJson.components[key];
            })
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '25%'],
            data: Object.keys(downloadJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: downloadJson[key]
                }
            }),
            label: {
                formatter: '{b}: {d}%'
            }
        }, {
            type: 'pie',
            radius: [0, '30%'],
            center: ['75%', '75%'],
            data: Object.keys(themeJson).map(function (key) {
                return {
                    name: key.replace('.js', ''),
                    value: themeJson[key]
                };
            }),
            label: {
                formatter: '{b}: {d}%'
            }
        }]
    };

    $(document).ready(function () {
        console.log(document.getElementById('serviceCount'));
        let serviceChart = echarts.init(document.getElementById('serviceCount')),
            serviceChartPie = echarts.init(document.getElementById('serviceCountPie')),
            serviceStatistic = echarts.init(document.getElementById('serviceCountStatistic'))

        serviceChart.setOption(optionService);
        serviceChartPie.setOption(optionServicePie);
        serviceStatistic.setOption(option);
    })
</script>
</html>